除了網頁依照設計安排自己動之外，最有趣的部份其實是與使用者的互動，滑鼠移動、點擊、鍵盤按鍵、捲動、甚至是表單送出等，都是可以監控的事件。操控事件最簡單的方式就是直接使用CSS的虛擬類別（pseudo-class），像是滑鼠移到網頁元件的hover，和滑鼠或觸控點擊的active，可以說是最便於使用的方式。

:hover 按鈕的靈魂效果
通常來說，為了讓人能夠一眼便認出畫面中的按鈕，按鈕的設計上會以「好像可以點」的視覺圖像製作，像是使用邊框、大面積色塊、增加圖示甚至是增加陰影效果，都能讓按鈕看起來就像是個按鈕。
當大家知道那是顆按鈕時，就會將滑鼠移到上方然後點擊，在這個一連串可預期的互動中，就是設計師暗藏小互動的時候了！除了可以產生點即暗示意味，也能夠展現網站的風格，很多時候，這些小動態甚至可以說是整個網站的靈魂，不論是底色轉變為外框、彈跳效果、按鈕放大、字體換色等，都是可以嘗試的方式。

:hover使用方式很簡單，就是在指定的網頁元件的名字旁，加上:hover使用，接下來下方定義的就會是hover事件觸發時，所呈現的CSS內容，若想改用:active來修改按鈕被點擊後的css狀態，也可以使用一樣的方式。

.my-div {
    text-align: center;
    font-size: 24px;
    line-height: 55px;
    height: 55px;
    width: 130px;
    color: white;
    border: solid 2px #333;
    background:#333;
    box-shadow: 0px 0px 10px #777;
}
.my-div:hover {
    border: solid 2px #333;
    color: #333;
    background:white;
}

不過:active指的是被點的當下狀態，除非用戶一直按著不放，不然是部會一直留在畫面上，以這樣的直觀的操作是無法達成點按後改變狀態，像是Toggle的效果，會需要利用input或其他具有狀態的html標籤，搭配:before、:after等偽元素可以實作。

如何使用CSS實作toggle可以參考這份教學：
https://www.w3schools.com/howto/howto_css_switch.asp

前往後續文章
CSS 第二篇：https://ithelp.ithome.com.tw/articles/10269891